<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>云上课堂 - 新时代文明实践智慧服务系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: #f5f5f5;
            overflow-x: hidden;
            padding-top: 44px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: linear-gradient(to bottom, #fce4ec 0%, #fff3e0 100%);
            color: #ff6b00;
            height: 44px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(255,107,0,0.2);
        }
        
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .back-btn {
            font-size: 18px;
        }
        
        .navbar-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        .navbar-right {
            font-size: 18px;
            cursor: pointer;
        }
        
        /* 搜索栏 */
        .search-bar {
            background: white;
            margin: 15px;
            border-radius: 20px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .search-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent;
        }
        
        .search-btn {
            color: #ff6b00;
            font-size: 16px;
            cursor: pointer;
        }
        
        /* 分类筛选 */
        .filter-tabs {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 5px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            display: flex;
            gap: 5px;
        }
        
        .filter-tab {
            flex: 1;
            text-align: center;
            padding: 10px;
            border-radius: 12px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
            color: #666;
        }
        
        .filter-tab.active {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            font-weight: bold;
        }
        
        /* 推荐课程 */
        .featured-section {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }
        
        .featured-header {
            padding: 15px 20px;
            border-bottom: 1px solid #f0f2f5;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .featured-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        
        .featured-course {
            padding: 20px;
            background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));
            position: relative;
        }
        
        .course-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: #ff4757;
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 10px;
            font-weight: bold;
        }
        
        .featured-content {
            display: flex;
            gap: 15px;
            align-items: flex-start;
        }
        
        .featured-cover {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            flex-shrink: 0;
        }
        
        .featured-info {
            flex: 1;
        }
        
        .featured-course-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
            line-height: 1.3;
        }
        
        .featured-instructor {
            font-size: 13px;
            color: #ff6b00;
            font-weight: bold;
            margin-bottom: 6px;
        }
        
        .featured-stats {
            display: flex;
            gap: 15px;
            font-size: 12px;
            color: #666;
            margin-bottom: 12px;
        }
        
        .featured-progress {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .progress-bar {
            flex: 1;
            height: 8px;
            background: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff6b00, #ffa726);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 6px;
            color: white;
            font-size: 9px;
        }
        
        .continue-btn {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 16px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        /* 课程列表 */
        .course-list {
            margin: 0 15px;
        }
        
        .course-card {
            background: white;
            border-radius: 16px;
            margin-bottom: 15px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            transition: all 0.3s;
            cursor: pointer;
            overflow: hidden;
        }
        
        .course-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 107, 0, 0.15);
        }
        
        .course-header {
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        
        .course-meta {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .course-level {
            padding: 4px 8px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: bold;
            color: white;
        }
        
        .level-beginner {
            background: #52c41a;
        }
        
        .level-intermediate {
            background: #fa8c16;
        }
        
        .level-advanced {
            background: #f5222d;
        }
        
        .course-duration {
            font-size: 11px;
            color: #999;
        }
        
        .course-content {
            padding: 0 20px 15px;
        }
        
        .course-item {
            display: flex;
            gap: 15px;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .course-cover {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex-shrink: 0;
        }
        
        .course-info {
            flex: 1;
        }
        
        .course-title {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 6px;
            line-height: 1.4;
        }
        
        .course-instructor {
            font-size: 12px;
            color: #ff6b00;
            font-weight: bold;
            margin-bottom: 4px;
        }
        
        .course-stats {
            display: flex;
            gap: 12px;
            font-size: 11px;
            color: #999;
            margin-bottom: 8px;
        }
        
        .course-desc {
            font-size: 12px;
            color: #666;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .course-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f8f9fa;
            padding: 12px 20px;
            font-size: 12px;
        }
        
        .course-rating {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #666;
        }
        
        .rating-stars {
            color: #ffa940;
        }
        
        .start-btn {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 16px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .start-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 加载更多 */
        .load-more {
            text-align: center;
            padding: 20px;
        }
        
        .load-more-btn {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .nav-label {
            font-size: 10px;
            color: #999;
        }
        
        .nav-item.active .nav-icon {
            color: #ff6b00;
        }
        
        .nav-item.active .nav-label {
            color: #ff6b00;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="navbar-left" onclick="goBack()">
            <span class="back-btn">←</span>
            <span class="navbar-title">云上课堂</span>
        </div>
        <div class="navbar-right">
            📊
        </div>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
        <span class="search-icon">🔍</span>
        <input type="text" class="search-input" placeholder="搜索课程名称或讲师">
        <span class="search-btn">搜索</span>
    </div>
    
    <!-- 分类筛选 -->
    <div class="filter-tabs">
        <div class="filter-tab active" onclick="switchFilter(this, 'all')">全部</div>
        <div class="filter-tab" onclick="switchFilter(this, 'volunteer')">志愿服务</div>
        <div class="filter-tab" onclick="switchFilter(this, 'safety')">安全知识</div>
        <div class="filter-tab" onclick="switchFilter(this, 'culture')">文化素养</div>
        <div class="filter-tab" onclick="switchFilter(this, 'skill')">实用技能</div>
    </div>
    
    <!-- 推荐课程 -->
    <div class="featured-section">
        <div class="featured-header">
            <span>🔥</span>
            <div class="featured-title">本周推荐</div>
        </div>
        <div class="featured-course">
            <div class="course-badge">热门</div>
            <div class="featured-content">
                <div class="featured-cover">📚</div>
                <div class="featured-info">
                    <div class="featured-course-title">志愿服务礼仪与沟通技巧</div>
                    <div class="featured-instructor">张教授 · 资深志愿服务培训师</div>
                    <div class="featured-stats">
                        <span>🎥 12课时</span>
                        <span>👥 1,234人学习</span>
                        <span>⭐ 4.8分</span>
                    </div>
                    <div class="featured-progress">
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 65%;">65%</div>
                        </div>
                        <button class="continue-btn">继续学习</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 课程列表 -->
    <div class="course-list">
        <div class="course-card" onclick="openCourse(1)">
            <div class="course-header">
                <div class="course-meta">
                    <span class="course-level level-beginner">初级</span>
                </div>
                <div class="course-duration">8课时</div>
            </div>
            <div class="course-content">
                <div class="course-item">
                    <div class="course-cover">🏥</div>
                    <div class="course-info">
                        <div class="course-title">应急救护基础知识</div>
                        <div class="course-instructor">李医生 · 急救培训专家</div>
                        <div class="course-stats">
                            <span>👥 856人学习</span>
                            <span>📅 2024-01-15更新</span>
                        </div>
                        <div class="course-desc">学习基础急救知识，掌握心肺复苏、外伤包扎等技能，为志愿服务提供安全保障，保护自己和他人的生命安全。</div>
                    </div>
                </div>
            </div>
            <div class="course-footer">
                <div class="course-rating">
                    <span class="rating-stars">⭐⭐⭐⭐⭐</span>
                    <span>4.9分 (128评价)</span>
                </div>
                <button class="start-btn">开始学习</button>
            </div>
        </div>
        
        <div class="course-card" onclick="openCourse(2)">
            <div class="course-header">
                <div class="course-meta">
                    <span class="course-level level-beginner">初级</span>
                </div>
                <div class="course-duration">6课时</div>
            </div>
            <div class="course-content">
                <div class="course-item">
                    <div class="course-cover">🌱</div>
                    <div class="course-info">
                        <div class="course-title">环保知识与绿色生活</div>
                        <div class="course-instructor">王专家 · 环保公益讲师</div>
                        <div class="course-stats">
                            <span>👥 623人学习</span>
                            <span>📅 2024-01-12更新</span>
                        </div>
                        <div class="course-desc">了解环保理念，学习垃圾分类、节能减排等实用知识，推广绿色生活方式，共同建设美丽社区。</div>
                    </div>
                </div>
            </div>
            <div class="course-footer">
                <div class="course-rating">
                    <span class="rating-stars">⭐⭐⭐⭐⭐</span>
                    <span>4.7分 (89评价)</span>
                </div>
                <button class="start-btn">开始学习</button>
            </div>
        </div>
        
        <div class="course-card" onclick="openCourse(3)">
            <div class="course-header">
                <div class="course-meta">
                    <span class="course-level level-intermediate">中级</span>
                </div>
                <div class="course-duration">10课时</div>
            </div>
            <div class="course-content">
                <div class="course-item">
                    <div class="course-cover">🎭</div>
                    <div class="course-info">
                        <div class="course-title">社区文化活动组织与策划</div>
                        <div class="course-instructor">陈老师 · 文化活动策划师</div>
                        <div class="course-stats">
                            <span>👥 445人学习</span>
                            <span>📅 2024-01-10更新</span>
                        </div>
                        <div class="course-desc">学习活动策划流程，掌握文艺演出、文化展览等活动的组织技巧，丰富社区文化生活。</div>
                    </div>
                </div>
            </div>
            <div class="course-footer">
                <div class="course-rating">
                    <span class="rating-stars">⭐⭐⭐⭐⭐</span>
                    <span>4.6分 (67评价)</span>
                </div>
                <button class="start-btn">开始学习</button>
            </div>
        </div>
        
        <div class="course-card" onclick="openCourse(4)">
            <div class="course-header">
                <div class="course-meta">
                    <span class="course-level level-intermediate">中级</span>
                </div>
                <div class="course-duration">15课时</div>
            </div>
            <div class="course-content">
                <div class="course-item">
                    <div class="course-cover">👥</div>
                    <div class="course-info">
                        <div class="course-title">社区心理疏导与情感支持</div>
                        <div class="course-instructor">刘心理师 · 心理咨询专家</div>
                        <div class="course-stats">
                            <span>👥 312人学习</span>
                            <span>📅 2024-01-08更新</span>
                        </div>
                        <div class="course-desc">学习基础心理学知识，掌握倾听技巧和情感支持方法，为社区居民提供心理关怀服务。</div>
                    </div>
                </div>
            </div>
            <div class="course-footer">
                <div class="course-rating">
                    <span class="rating-stars">⭐⭐⭐⭐⭐</span>
                    <span>4.8分 (45评价)</span>
                </div>
                <button class="start-btn">开始学习</button>
            </div>
        </div>
        
        <div class="course-card" onclick="openCourse(5)">
            <div class="course-header">
                <div class="course-meta">
                    <span class="course-level level-advanced">高级</span>
                </div>
                <div class="course-duration">20课时</div>
            </div>
            <div class="course-content">
                <div class="course-item">
                    <div class="course-cover">📊</div>
                    <div class="course-info">
                        <div class="course-title">志愿团队管理与项目运营</div>
                        <div class="course-instructor">马主任 · 志愿服务管理专家</div>
                        <div class="course-stats">
                            <span>👥 189人学习</span>
                            <span>📅 2024-01-05更新</span>
                        </div>
                        <div class="course-desc">深入学习团队管理、项目策划、资源调配等高级技能，培养志愿服务骨干和组织者。</div>
                    </div>
                </div>
            </div>
            <div class="course-footer">
                <div class="course-rating">
                    <span class="rating-stars">⭐⭐⭐⭐⭐</span>
                    <span>4.9分 (28评价)</span>
                </div>
                <button class="start-btn">开始学习</button>
            </div>
        </div>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more">
        <button class="load-more-btn" onclick="loadMore()">加载更多课程</button>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="location.href='index.html'">
            <div class="nav-icon">🏠</div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item" onclick="location.href='venues.html'">
            <div class="nav-icon">📍</div>
            <div class="nav-label">阵地</div>
        </div>
        <div class="nav-item" onclick="location.href='activities.html'">
            <div class="nav-icon">📅</div>
            <div class="nav-label">活动</div>
        </div>
        <div class="nav-item" onclick="location.href='services.html'">
            <div class="nav-icon">🎁</div>
            <div class="nav-label">服务</div>
        </div>
        <div class="nav-item active">
            <div class="nav-icon">☁️</div>
            <div class="nav-label">课堂</div>
        </div>
    </div>
    
    <script>
        // 返回上一页
        function goBack() {
            history.back();
        }
        
        // 切换筛选
        function switchFilter(element, type) {
            document.querySelectorAll('.filter-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            element.classList.add('active');
            
            console.log('筛选课程类型:', type);
            // 这里可以根据类型筛选课程
            filterCourses(type);
        }
        
        // 筛选课程
        function filterCourses(type) {
            const cards = document.querySelectorAll('.course-card');
            cards.forEach(card => {
                if (type === 'all') {
                    card.style.display = 'block';
                } else {
                    // 这里可以根据课程分类进行筛选
                    card.style.display = 'block';
                }
            });
        }
        
        // 打开课程详情
        function openCourse(id) {
            alert(`打开课程详情 ID: ${id}\\n\\n功能开发中...\\n将显示：\\n• 课程介绍视频\\n• 章节目录\\n• 学习进度\\n• 讨论区\\n• 练习题目`);
        }
        
        // 搜索功能
        document.querySelector('.search-btn').addEventListener('click', function() {
            const keyword = document.querySelector('.search-input').value;
            if (keyword.trim()) {
                alert(`搜索课程关键词: ${keyword}\\n功能开发中...`);
            }
        });
        
        // 回车搜索
        document.querySelector('.search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.querySelector('.search-btn').click();
            }
        });
        
        // 继续学习按钮
        document.querySelector('.continue-btn').addEventListener('click', function(e) {
            e.stopPropagation();
            alert('继续学习"志愿服务礼仪与沟通技巧"课程\\n当前进度：65%\\n下一节：第7章 - 处理冲突的技巧');
        });
        
        // 开始学习按钮
        document.querySelectorAll('.start-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                alert('开始学习课程\\n功能开发中...\\n将跳转到课程播放页面');
            });
        });
        
        // 加载更多
        function loadMore() {
            alert('加载更多课程中...\\n将显示更多精品课程');
        }
        
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.course-card');
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                setTimeout(() => {
                    card.style.transition = 'all 0.5s ease';
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 100);
            });
        });
    </script>
</body>
</html>